<template>
	<view class="page-container bg-grey">
		<up-navbar safeAreaInsetTop fixed bgColor="transparent" :autoBack="true"></up-navbar>
		<image :src="imgBaseUrl + 'rank-header.png'" class="rank-header" />
		<view class="statistic-date">周期：11月04日 - 11月11日</view>
		<view class="rank-list">
			<view class="rank-title">
				<text class="index">排名</text>
				<text class="name">用户昵称</text>
				<text class="amount">销售金额</text>
			</view>
			<scroll-view scroll-y :style="{ height: 'calc(100% - 112rpx)' }">
				<view v-for="(item, index) in rankList" :key="index" class="pb-48">
					<view class="rank-item">
						<view class="rank-index">
							<image v-if="index < 3" :src="imgBaseUrl + 'group-rank-' + (index + 1) + '.png'" />
							<text v-else>{{ index + 1 }}</text>
						</view>
						<view class="rank-name">
							<image
								src="https://oiz.zhijingyou.com/upload/2024/lvapps/1726650540-532718099638976.jpg"
								class="rank-avatar"
								mode="aspectFill"
							/>
							<text>小乖吃喝玩乐记</text>
						</view>
						<text class="sale-amount">&yen;1,231</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view :class="['rank-mine rank-item', 'rank-' + mineRank]">
			<view class="rank-index">
				<image v-if="mineRank < 4" :src="imgBaseUrl + 'group-rank-' + mineRank + '.png'" />
				<text v-else>{{ mineRank }}</text>
			</view>
			<view class="rank-name">
				<image
					src="https://oiz.zhijingyou.com/upload/2024/lvapps/1726650540-532718099638976.jpg"
					class="rank-avatar"
					mode="aspectFill"
				/>
				<text>小乖吃喝玩乐记</text>
			</view>
			<text class="sale-amount">&yen;1,231</text>
		</view>
	</view>
</template>

<script setup lang="ts">
const imgBaseUrl = inject("imgBaseUrl")
const rankList = ref(new Array(20).fill(1))
const mineRank = ref(1)
</script>
<style lang="scss" scoped>
.rank-header {
	width: 100%;
	height: 640rpx;
}
.statistic-date {
	position: absolute;
	top: 304rpx;
	left: 52rpx;
	font-size: 26rpx;
	color: $c-black-_6;
}
.rank-item {
	display: flex;
	align-items: center;
	.rank-index {
		width: 15%;
		font-size: 32rpx;
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: center;
		image {
			width: 56rpx;
			height: 56rpx;
		}
	}
	.rank-name {
		width: 55%;
		padding-right: 24rpx;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		.rank-avatar {
			width: 64rpx;
			height: 64rpx;
			margin-right: 16rpx;
			border-radius: 50%;
		}
	}
	.sale-amount {
		font-size: 28rpx;
		font-weight: bold;
		font-family: "OPPO";
		width: 30%;
		text-align: right;
		padding-right: 32rpx;
	}
}
.rank-list {
	position: absolute;
	top: 386rpx;
	left: 24rpx;
	right: 24rpx;
	bottom: calc(110rpx + env(safe-area-inset-bottom));
	background: linear-gradient(180deg, #fffbe1 0%, rgba(255, 255, 255, 0) 13%), $c-white;
	border: 4rpx solid $c-white;
	border-radius: 24rpx;
	.rank-title {
		padding: 38rpx 0 40rpx;
		line-height: 34rpx;
		display: flex;
		color: $c-grey-86;
		.index {
			width: 15%;
			text-align: center;
		}
		.name {
			width: 55%;
		}
		.amount {
			width: 30%;
			text-align: right;
			padding-right: 32rpx;
		}
	}
}
.rank-mine {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 32rpx 24rpx calc(32rpx + env(safe-area-inset-bottom));
	background: linear-gradient(180deg, #f4f3ee 0%, $c-white 95%);
	border-radius: 32rpx 32rpx 0 0;
	box-shadow: 0 4rpx 16rpx 0 rgba(0, 0, 0, 0.1), inset 0 4rpx 0 0 $c-white;
	border: 2rpx solid #d4c992;
	border-bottom: none;
	&.rank-1 {
		background: linear-gradient(180deg, #fff5d2 0%, $c-white 95%);
		border-color: #ffd431;
	}
	&.rank-2 {
		background: linear-gradient(180deg, #eff9ff 0%, $c-white 95%);
		border-color: #b1d9f9;
	}
	&.rank-3 {
		background: linear-gradient(180deg, #fcf3e7 0%, $c-white 95%);
		border-color: #f6d7a9;
	}
}
</style>
